<template>
  <view class="container">
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(item,index) in bannerList">
        <navigator class="swiper-item">
          <image :src="item.picUrl" mode="widthFix"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 分类导航区域 -->
    <view class="category-container">
      <view class="category-box">
        <!-- 每一项 -->
        <view class="category-list" v-for="(item,index) in categoryList">
          <navigator class="category-column">
            <image :src="item.icon" class="category-imgbox" mode=""></image>
            <view class="category-title"></view>
          </navigator>
        </view>
      </view>
    </view>

    <!-- 秒杀 -->
    <view class="miaoshaGoods">
      <view class="ttt">
        <view class="l">
          <view class="u-line"></view>
        </view>
        <view class="content">
          <image src="../../static/images/miaosha.png" mode=""></image>
          <view class="innertxt">限时秒杀</view>
        </view>
        <view class="l">
          <view class="u-line"></view>
        </view>
      </view>
      <!-- 秒杀列表 -->
      <navigator class="miaosha-goods-list" v-for="(item,index) in GoodsList">
        <image class="image" :src="item.pic" mode=""></image>
        <view class="r">
          <!-- 秒杀标题 name-->
          <view class="goods-title">
            {{item.name}}
          </view>
          <!-- 秒杀价格 minPrice 原始价格originalPrice-->
          <view class="miaosha-price-btn">
            <view class="price">
              ￥
              <text>￥</text>
            </view>

          </view>
        </view>
      </navigator>
    </view>

    <!-- 商品列表 -->
    <view class="goodslist">
      <view class="ttt">
        <view class="l">
          <view class="u-line"></view>
        </view>
        <view class="content">
          <image src="../../static/images/pingtuan.png" mode=""></image>
          <view class="innertxt">商品列表</view>
        </view>
        <view class="l">
          <view class="u-line"></view>
        </view>
      </view>
      <!-- 列表 -->
      <view class="goods-container">
        <!-- 列表的每一项  图片字段是pic-->
        <navigator class="goods-box">
          <view class="img-box">
            <image src="" mode=""></image>
          </view>
          <view class="goods-title">
            <view class="">

            </view>
          </view>
          <view class="price-score">
            <view class="item">
              <text>￥</text>

            </view>
          </view>
        </navigator>
      </view>

    </view>


  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 轮播图
        bannerList: [],
        // 导航栏
        categoryList: [],
        // 秒杀
        GoodsList:[]
      }
    },
    methods: {
      // 轮播图
      async getBannerList() {
        const res = await uni.$http.get('banner/list?type=index')
        this.bannerList = res.data.data
      },
      // 导航栏
      async getcategory() {
        const res = await uni.$http.get('shop/goods/category/all')
        this.categoryList = res.data.data
      },
      // 秒杀
      async getGoodsList() {
        const res = await uni.$http.post('shop/goods/list/v2')
       var r =  res.data.data.result.forEach((item)=>{
            this.goodList = item
        })
        
        console.log(res.data.data.result,"127");
      },
      
    },
    onLoad() {
      this.getBannerList();
      this.getcategory()
      this.getGoodsList()
    }
  }
</script>

<style lang="scss">
  .container {
    background-color: #fff;
  }

  swiper {
    height: 330rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }

  .category-container {
    padding: 0 0 10px 0;
    margin-top: 16rpx;
    position: relative;
    background-color: white;

    .category-box {
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      box-shadow: 0px 0px 18px 0px rgba(5, 5, 5, 0.15);
      margin-left: 25rpx;
      margin-right: 25rpx;
      border-radius: 10px;
      padding: 20rpx 0;
      position: inherit;

      .category-list {
        width: 140rpx;
        text-align: center;
        display: inline-block;
        overflow: hidden;

        .category-column {
          width: 100%;
          margin-top: 20rpx;
          overflow: hidden;

          image {
            width: 100rpx;
            height: 100rpx;
          }

          .ti {
            font-size: 24rpx;
            text-align: center;
          }
        }
      }
    }
  }

  // 秒杀

  .miaoshaGoods {
    .ttt {
      display: flex;
      align-items: center;
      margin-top: 24rpx;

      .l {
        flex: 1;
        display: inline-block;

        .u-line {
          margin: 0;
          border-bottom-width: 1px;
          border-bottom-style: solid;
          width: 100%;
          transform: scaleY(0.5);
          border-color: #d6d7d9;

          vertical-align: middle;

          display: flex;
          flex-direction: column;
          flex-shrink: 0;
          flex-grow: 0;
          flex-basis: auto;
          align-items: stretch;
          align-content: flex-start;
        }
      }

      .content {
        display: flex;
        align-items: center;
        padding: 0 16rpx;

        image {
          width: 34rpx;
          height: 42rpx;
        }

        .innertxt {
          margin-left: 16rpx;
          color: #333;
          font-size: 28rpx;
        }
      }

    }

    .miaosha-goods-list {
      margin: 20rpx;
      border-radius: 16rpx;
      display: flex;
      padding: 20rpx;

      .image {
        width: 260rpx;
        height: 260rpx;
        flex-shrink: 0;
        border-radius: 16rpx;
        display: inline-block;
        overflow: hidden;
      }

      .r {
        margin-left: 32rpx;

        .goods-title {
          color: #333;
          font-size: 28rpx;
        }

        .miaosha-price-btn {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .price {
            color: #e64340;
            font-size: 40rpx;
            margin-top: 12rpx;
            padding-right: 32rpx;

            text {
              color: #666666;
              font-size: 26rpx;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }

  // 商品推荐
  .goodslist {
    .ttt {
      display: flex;
      align-items: center;
      margin-top: 24rpx;

      .l {
        flex: 1;
        display: inline-block;

        .u-line {
          margin: 0;
          border-bottom-width: 1px;
          border-bottom-style: solid;
          width: 100%;
          transform: scaleY(0.5);
          border-color: #d6d7d9;

          vertical-align: middle;

          display: flex;
          flex-direction: column;
          flex-shrink: 0;
          flex-grow: 0;
          flex-basis: auto;
          align-items: stretch;
          align-content: flex-start;
        }
      }

      .content {
        display: flex;
        align-items: center;
        padding: 0 16rpx;

        image {
          width: 34rpx;
          height: 42rpx;
        }

        .innertxt {
          margin-left: 16rpx;
          color: #333;
          font-size: 28rpx;
        }
      }

    }

    // 列表
    .goods-container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      box-sizing: content-box;
      padding: 0 24rpx;

      .goods-box {
        width: 339rpx;
        background-color: #fff;
        overflow: hidden;
        margin-top: 24rpx;
        border-radius: 5px;
        border: 1px solid #D1D1D1;
        padding-bottom: 10rpx;

        .img-box {
          width: 339rpx;
          height: 339rpx;
          overflow: hidden;

          image {
            width: 339rpx;
            height: 339rpx;
          }
        }

        .goods-title {
          padding: 0 4rpx;
          padding-top: 16rpx !important;
          color: #333;
          font-size: 28rpx;
          display: -webkit-box !important;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical !important;
        }

        .price-score {
          display: flex;
          color: #e64340;
          font-size: 38rpx;

          .item {
            padding: 0 8rpx;
            display: flex;
            align-items: center;

            text {
              padding: 0 4rpx;
              font-size: 28rpx;
            }
          }
        }

      }
    }
  }
</style>
